<template>
  <div class="main-box">
    <div class="card">
      <Tree
        ref="treeRef"
        label="name"
        title="部门列表"
        node-key="deptId"
        :data="deptData"
        :props="deptProps"
        default-expand-all
        @node-click="handleNodeClick"
      />
    </div>
    <div class="table-box">
      <Table ref="tableRef" row-key="id" :columns="columns" :init-param="initParam" :request-api="userApi.list">
        <template #header>
          <ElButton v-auth="'system:user:add'" type="primary" :icon="CirclePlus" @click="handleAdd">新增用户</ElButton>
        </template>
        <!-- 菜单操作 -->
        <template #action="{ row, id }">
          <TableAction :actions="getActions(row, id)" :show-num="0"></TableAction>
        </template>
      </Table>
      <Dialog ref="dialogRef" @submit="handleSubmit" :title="title">
        <Form ref="formRef" :schemas="schemas" label-width="100px">
          <template #deptId="{ formModel, schema }">
            <ApiTreeSelect
              v-model="formModel[schema.field]"
              node-key="deptId"
              :request-api="deptApi.list"
              :props="deptProps"
            ></ApiTreeSelect>
          </template>
          <template #roleIds="{ formModel, schema }">
            <ApiSelect
              v-model="formModel[schema.field]"
              multiple
              :request-api="roleApi.listAll"
              value-name="id"
              label-name="roleName"
            ></ApiSelect>
          </template>
          <template #postIds="{ formModel, schema }">
            <ApiSelect
              v-model="formModel[schema.field]"
              multiple
              :request-api="postApi.listAll"
              value-name="id"
              label-name="postName"
            ></ApiSelect>
          </template>
        </Form>
      </Dialog>
    </div>
  </div>
</template>

<script setup lang="tsx" name="SysUser">
import { reactive, ref } from "vue";
import { ElButton } from "element-plus";
import { CirclePlus } from "@element-plus/icons-vue";
import { Table, TableAction, useTable } from "@/components/Table";
import { Dialog, useDialog } from "@/components/Dialog";
import { Form, useForm, ApiTreeSelect, ApiSelect } from "@/components/Form";
import { Tree } from "@/components/Tree";
import { ActionItem } from "@/components/Table/type";
import userApi from "./api";
import deptApi from "@/views/system/dept/api";
import roleApi from "@/views/system/role/api";
import postApi from "@/views/system/post/api";
import { columns, schemas } from "./data";
const tableRef = ref();
const dialogRef = ref();
const formRef = ref();
const { getTableList } = useTable(tableRef);
const { open, close, openLoading } = useDialog(dialogRef);
const { updateFields, validateFields, resetFields } = useForm(formRef);
const treeRef = ref();
const title = ref("");
const deptProps = {
  label: "deptName"
};
const deptData = ref([]);
const initParam = reactive({ deptId: null });
deptData.value = await deptApi.list({});
const handleNodeClick = data => {
  initParam.deptId = data.deptId;
};
const handleAdd = () => {
  title.value = "新增用户";
  open(0);
  resetFields();
};
const handleSubmit = async flag => {
  const fields = await validateFields();
  await openLoading(async () => {
    if (flag) {
      await userApi.edit(fields);
    } else {
      await userApi.add(fields);
    }
    close();
    await getTableList();
  });
};

const getActions = (row, id): Partial<ActionItem>[] => {
  return [
    {
      type: "primary",
      icon: "edit",
      auth: "system:user:edit",
      onClick: async () => {
        title.value = "编辑用户";
        dialogRef.value.open(1);
        const res = await userApi.query(id);
        await updateFields(res);
      }
    },
    {
      type: "danger",
      auth: "system:user:remove",
      popConfirm: {
        onConfirm: async () => {
          await userApi.remove(id);
          await getTableList();
        }
      },
      icon: "delete"
    }
  ];
};
</script>
<style scoped>
.card {
  margin-right: 10px;
}
</style>
